<template>
  <div class="rg_layout">
    <div class="rg_left">
      <p>新用户注册</p>
      <p>USER REGISTER</p>
    </div>
    <div class="rg_center">
      <div class="rg_form">
        <div style="margin: 50px 0"></div>
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-form-item label="用户名" prop="account" style="margin-bottom:50px">
            <el-col :span="20">
              <el-input 
                placeholder="请输入用户名"
                v-model="form.account"
                style="width:300px"
              ></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              placeholder="请输入密码"
              v-model="form.password"
              style="width:300px"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <!-- <el-col :span="20">
              <el-button type="primary" @click="onSubmit" >立即注册</el-button>
            </el-col> -->
             <el-button @click="onSubmit" round type="success" style="margin-top:15px;margin-left:195px;Opacity:0.9">立即注册</el-button>
             <!-- <el-button type="success" round>成功按钮</el-button> -->
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="rg_right">
      <p>
        已有账号?
        <el-link icon="el-icon-user-solid" type="primary" @click="login_asd"
          >立刻登陆</el-link
        >
      </p>
    </div>
  </div>
</template>
 
<script>
//import axios from "axios";
export default {
  mounted() {
    this.$store.state.yesOrNo = false;
  },
  name: "handleLogin",
  data: function () {
    return {
      rules: {
          account:[{required: true, message: '请输入用户名', trigger: 'blur'}],
          password:[{required: true, message: '请输入密码', trigger: 'blur'}]
      },
      form: {
        account: "",
        password: "",
      },
      msg: "",
    };
  },
  methods: {
    login_asd() {
      this.$router.push("/login");
    },
    onSubmit() {
       this.$refs.form.validate((valid) => {
         if (valid) {
          this.axios.post(`/user/register`, this.form).then((res) => {
            if (res.data.code == 0) {
            this.$message({
              message: "注册成功",
              type: "success",
            });
            this.$router.push("/login");
            } else {
              this.$notify.error({
                title: "提示",
                message: "注册失败，请更换用户名",
              });
              this.$router.push("/handleLogin");
            }
          });
        }
       });
     },
  },
};
</script>
 
 
<style scoped>
* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

/* body {
  background-image: url(../assets/maomao.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: 0px -50px;
} */

.rg_layout {
  /* width: 900px; */
  height: 730px;
  border: 5px solid #eeeeee;
   background-image: url(../assets/maomao.jpg);
  opacity: 0.8;
  /*让div水平居中*/
  margin: auto;
  /* margin-top: 100px; */

  background-repeat: no-repeat;
  background-size: 100%;
  background-position: 0px -50px;
}

.rg_left {
  float: left;
  margin: 15px;
  width: 20%;
}

.rg_left > p:first-child {
  color: #ffd026;
  font-size: 40px;
}

.rg_left > p:last-child {
  color: #a6a6a6; 
  font-size: 20px;
}

.rg_center {
  /*border: 1px solid red;*/
  float: left;
  width: 450px;
  margin-top:200px;
  margin-left:150px;
  /*margin: 15px;*/
}

.rg_right {
  float: right;
  margin: 15px;
}

.rg_right > p:first-child {
  font-size: 20px;
}

.rg_right p a {
  color: pink;
}
</style>